import { store as Store } from "@mall/api-services"
import { Button, Card, Form, Input } from "antd"
import * as _ from "lodash"
import * as React from "react"
import { useEffect, useState } from "react"
import { useHistory, useParams } from "react-router-dom"
import Page from "../../../components/page"
import { ImageBlobsPopover } from "../../store/blobs"
import classes from "./edit.module.scss"

export default function EditStoreInfo() {

  const [form] = Form.useForm()
  const { storeId = "" } = useParams()
  const history = useHistory()
  const [store, setStore] = useState(new Store.Store())
  const [loading, setLoading] = useState(false)
  const [visible, setVisible] = useState(false)

  const [offset, setOffset] = useState([0, 0] as [number, number])

  useEffect(() => {
    Store.StoreServiceV1.getStore(storeId).then(setStore)
  }, [storeId])

  useEffect(() => {
    form.setFieldsValue(store)
  }, [form, store])

  const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 8 },
  }
  const tailLayout = {
    wrapperCol: { offset: 4, span: 8 },
  }
  const onFinish = (values: any) => {
    setLoading(prevLoading => prevLoading && true)
    const newStore = _.assign(new Store.Store(), store, values)
    Store.StoreServiceV1.saveStore(newStore)
      .then(() => history.push(`/stores/${storeId}/settings/store-info`))
      .finally(() => setLoading(false))
  }

  return (
    <div className={classes.editStoreInfo}>
      <ImageBlobsPopover
        visible={visible}
        onVisibleChange={setVisible}
        upload={{
          multiple: false,
        }}
        offset={offset}
        onSelect={blobs => {
          form.setFieldsValue({ logo_url: blobs[0].url })
          setStore(_.assign(new Store.Store(), store, {
            logo: blobs[0].url,
          }))
          setVisible(false)
        }}/>
      <Page.Header title="店铺信息" ghost={false}/>
      <Page.Content>
        <Card size="small">
          <Form
            {...layout}
            form={form}
            onFinish={onFinish}>
            <Form.Item label="店铺LOGO" required>
              <img className={classes.storeLogo} src={store.logo} alt=""/>
              <Button size="small" type="link"
                      onClick={e => {
                        setVisible(!visible)
                        setOffset([e.clientX, e.clientY + 30])
                      }}>上传LOGO</Button>
              <Form.Item name="logo_url"
                         rules={[{ required: true, message: "请上传店铺LOGO!" }]}
                         noStyle>
                <Input hidden/>
              </Form.Item>
            </Form.Item>
            <Form.Item
              label="店铺名称"
              name="name"
              rules={[{ required: true, message: "请填写店铺名称!" }]}
              extra="店铺名称应尽量简洁易记，建议15字以内">
              <Input/>
            </Form.Item>
            {/*            <Form.Item
              label="主营类目"
              name="category">
              <span className="ant-form-text">女装</span>
            </Form.Item>*/}
            <Form.Item
              label="创建日期"
              name="category">
              <span className="ant-form-text">{store.createdTime}</span>
            </Form.Item>
            <Form.Item
              label="店铺简介"
              name="description">
              <Input.TextArea
                autoSize={{ minRows: 4, maxRows: 6 }}/>
            </Form.Item>
            <Form.Item {...tailLayout}>
              <Button loading={loading} type="primary" htmlType="submit">保存</Button>
            </Form.Item>
          </Form>
        </Card>
      </Page.Content>
    </div>
  )
}
